<template>
  <div v-loading="loading">
    <el-popover width="850"
                trigger="manual"
                placement="bottom-start"
                ref="making-popover"
                popper-class="popper-select"
                 v-model="visible"
                :disabled="value1 === '' || value1 === undefined">

      <ZVirtualTable v-model="optionsList"
                     :key="popupKey"
                     @row-click="handleSelect"
                     :height="480">
        <el-table-column :width="120"
                         property="m_code"
                         label="编号 "></el-table-column>
        <el-table-column :width="200"
                         property="m_name"
                         label="名称"></el-table-column>
        <el-table-column :width="200"
                         property="m_type"
                         label="规格"></el-table-column>
        <el-table-column :width="100"
                         property="m_units"
                         label="单位"
                        ></el-table-column>
        <el-table-column :width="100"
                         property="m_sdepot_name"
                         label="库房"></el-table-column>
         <el-table-column :width="100"
                         label="图片">
          <template slot-scope="scope">
            <el-image
                      style="width: 80px; height: 80px"
                      :src="scope.row.drawing_no"
                      fit="cover"></el-image>
              </template>                 
            </el-table-column>
      </ZVirtualTable>

      <el-input @input="querySearch"
                slot="reference"
                clearable
                id="input-box"
                placeholder="请输入"
                @focus="focus"
                @blur="blur"
                v-model="value1">
      </el-input>

    </el-popover>

  </div>
</template>

<script>
import ZVirtualTable from '@/components/storybook/z-virtual-table'
import { v4 } from 'uuid'
import Context from './context'
import { has, get } from 'lodash'

export default {
  name: 'custom-form-select-search',// ltk store && 3.1 store
  components: {
    ZVirtualTable
  },
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      dataModel: {},
      optionsList: [],
      list: [],
      loading: false,
      value1: '',
      popupKey: undefined,
      visible: false

    }
  },

  created () {
    this.getDataList()
  },

  methods: {
    focus () {
      this.visible = true
    },
    blur () {
      this.visible = false
    },
    handle (val) {
      if (val === '') {
        this.optionsList = this.list
      }
    },

    handleSelect (item) {
      this.value = { ...item }
      this.value1 = item.smatl_info
      this.dataModel = this.value
      this.$emit('input', this.dataModel)
      this.$emit('onSelect', this.dataModel)
      // this.$nextTick(() => {
      //   this.$refs['making-popover'].doClose()
      // })
    },
    getDataList () {
      this.loading = true
      if (has(Context, 'list')) {
        this.list = get(Context, 'list')
        this.loading = false
        return
      }
      let param = {
        gadgetId: '9418d2d3-225e-4a77-864a-009da4ea7c93'
      }
      this.$interface.reports.getReportDataInfo(param)
        .then(({ data: res }) => {
          this.list = res.data
          Context.list = this.list
        })
        .catch(() => { })
        .finally(() => {
          this.loading = false
        })
    },
    afterLeave () {
      this.value1 = undefined
      this.$refs['making-popover'].doDestroy()
    },
    querySearch (queryString) {
      try {
        let _self = this
        if (queryString === '') {
          _self.popupKey = undefined
        } else {
          _self.optionsList = _self.list.filter(data => data.m_info.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
          if (_self.optionsList.length === 0) {
            _self.optionsList = []
          }
          _self.$nextTick(() => {
            _self.popupKey = v4()
            _self.visible = true
            // _self.$refs['making-popover'].doShow()
          })
        }
      } catch (error) {
        console.log('error', error)
      }
    }

  }
}
</script>

<style lang="scss">
.el-popover.select-search-popover {
  padding: 10px 0;
}
.popper-select {
  top: 40px;
}
</style>
